<template>
	<div>
		<TablePlus :columns="columns" :requestApi="RequestProductList" :initParam="{}">
			<!-- 表格 header 按钮 -->
			<template #tableHeader>
				<el-button type="primary" :icon="CirclePlus" size="small">新增会员</el-button>
				<el-button type="primary" :icon="Upload" plain size="small">批量删除</el-button>
			</template>
			<!-- 自定义图片显示 -->
			<template #picture="{ row }">
				<el-image :src="row.picture" :lazy="true"></el-image>
			</template>
			<template #operation>
				<el-button type="primary" link :icon="View">查看</el-button>
				<el-button type="primary" link :icon="EditPen">编辑</el-button>
				<el-button type="primary" link :icon="Delete">删除</el-button>
			</template>
		</TablePlus>
	</div>
</template>

<script setup lang="ts">
import type { TableModel } from '@/components/TablePlus/interface'
import TablePlus from '@/components/TablePlus/index.vue'
import { Delete, EditPen, View, CirclePlus, Upload } from '@element-plus/icons-vue'
import { api } from '@/api'
const { RequestProductList } = api
const columns: Array<TableModel.ColumnProps> = [
	{ prop: 'id', label: '序列号', width: 180 },
	{ prop: 'picture', label: '图片', width: 100 },
	{ prop: 'shop', label: '店名', search: { key: 'shopKey', el: 'input' } },
	{ prop: 'product', label: '名称', search: { key: 'productKey', el: 'input' } },
	{
		prop: 'price',
		label: '价格',
		search: {
			el: 'select',
			option: [
				{ key: '12.09', value: '12.09' },
				{ key: '122.09', value: '122.09' }
			]
		}
	},
	{ prop: 'time', label: '时间', search: { el: 'datepicker' } },
	{ prop: 'operation', label: '操作', fixed: 'right', width: 330 }
]
</script>
<style scoped></style>
